<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
		<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/global.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/styles.css">

	<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
	<script src="js/bootstrap.min.js" charset="UTF-8"></script>
	<script src="js/swiper.min.js" charset="UTF-8"></script>
	<script src="js/global.js" charset="UTF-8"></script>
	<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>

	<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
	<script src="https://cdn.bootcss.com/distpicker/2.0.3/distpicker.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/axios.min.js"></script>
	<script src="js/layui/layui.js"></script>
	<script type="text/javascript">
		/* 注册layui */
		layui.use('layer', function () {
			var layer = layui.layer;
		});

		layui.use('laydate', function(){
			var laydate = layui.laydate;

			//执行一个laydate实例
			laydate.render({
				elem: '#test1' //指定元素
			});
		});



		$(function(){
			new Vue({
				el: "#app",
				data: {
					address:[],
					orders:[],
					addrezz:{
						rname:"",
						id:"",
						userId:"",
						phone:"",
						isdefault:"",
						province:"",
						city:"",
						area:"",
						detail:""
					},
					opr:"add",
					addressId:"",
					user:{}

				},
				methods:{
					update(){

						axios.post("http://192.168.6.125:8080/user/update",this.user).then(response=> {
							console.log(this.address);
							if (response.data.code==200) {
								layer.msg("修改成功!");
							}else{
								alert("错误:"+response.data.msg);
							}
						})

					},
					clear(){
						this.addrezz.rname="";
						this.addrezz.province="";
						this.addrezz.city="";
						this.addrezz.area="";
						$().distpicker('reset');
						this.addrezz.detail="";
						this.addrezz.phone="";
						this.addrezz.isdefault="";

					},

					save(){


						if (this.opr=="add") {
							this.addrezz.userId=this.user.id;
							console.log(this.addrezz)
							axios.post("http://192.168.6.125:8080/address/add", this.addrezz).then(response => {
								if (response.data.code == 200) {
									layer.msg("增加成功!")
									//清空表单
									this.clear();

									//重新查一次地址列表
									this.getList();

								} else {
									alert("错误:" + response.data.msg);
								}
							})
						}else if (this.opr=="update"){
							console.log(this.addrezz);
							axios.post("http://192.168.6.125:8080/address/update",this.addrezz).then(response => {
								if (response.data.code == 200) {
									layer.msg("修改成功!",{
										offset:'t'
									});
									this.clear();
									this.opr="add";
									//重新查列表
									this.getList();

								} else {
									alert("错误:" + response.data.msg);
								}
							})

						}
					},
					getList(){
						axios.post("http://192.168.6.125:8080/address/getAll",this.user).then(response => {
							if (response.data.code == 200) {
								this.address = response.data.data;
								console.log(this.address);
							} else {
								alert("错误:" + response.data.msg);
							}
						})
					},
					edit(id){
						//保存标志改为修改
						this.opr="update";
						axios.get("http://192.168.6.125:8080/address/getById/"+id).then(response=> {
							if (response.data.code==200) {
								this.addrezz = response.data.data;
								if (response.data.data.isdefault=='n'){
									this.addrezz.isdefault="";
								}
								$('#selectCity').distpicker('destroy');
								$('#selectCity').distpicker({
									province: this.addrezz.province,
									city: this.addrezz.city,
									district: this.addrezz.area
								});
								console.log(this.addrezz);
							}else{
								alert("错误:"+response.data.msg);
							}
						})
					},
					del(id,index,isdefault){
						if (isdefault=="y"){
							layer.alert('默认地址无法删除!', {
								shade: 0,
								icon: 5,
								skin: 'layer-ext-demo' //见：扩展说明
							})
							return;
						}

						layer.confirm('您确定要删除吗？', {
							shade: 0,
							fixed: false,
							btn: ['确认','取消'] //按钮
						}, ()=>{
							//确认删除
							axios.get("http://192.168.6.125:8080/address/del/"+id).then(response=> {
								if (response.data.code==200) {
									layer.msg("删除成功!")
									this.address.splice(index,1);
									console.log(this.address)
								}else{
									alert("错误:"+response.data.msg);
								}
							})
						}, function(){
							//取消
						});


					},
					setDefault(id,isdefault){
						axios.post("http://192.168.6.125:8080/address/setDefault/"+id,this.user).then(response=> {
							if (response.data.code==200) {

								layer.msg("设置成功!")
								axios.post("http://192.168.6.125:8080/address/getAll",this.user).then(response=> {
									if (response.data.code==200) {
										this.address = response.data.data;
										console.log(this.address);
									}else{
										alert("错误:"+response.data.msg);
									}
								})

							}else{
								alert("错误:"+response.data.msg);
							}
						})
					}
				},
				mounted: function () {

					 this.user = JSON.parse(localStorage.getItem("userz"));


					axios.post("http://192.168.6.125:8080/address/getAll",this.user).then(response=> {
						if (response.data.code==200) {
							this.address = response.data.data;
							console.log(this.address);
						}else{
							alert("错误:"+response.data.msg);
						}
					})
				}
			});
		})
	</script>
</head>
<body class="bgf5">

<div class="user-content__box clearfix bgf" id="app">

					<div class="title">账户信息-收货地址</div>
					<form action="" class="user-addr__form form-horizontal" role="form">
						<p class="fz18 cr">新增收货地址<span class="c6" style="margin-left: 20px">电话号码、手机号码选填一项，其余均为必填项</span></p>
						<div class="form-group">
							<label for="name" class="col-sm-2 control-label">收货人姓名：</label>
							<div class="col-sm-6">
								<input class="form-control" id="name" placeholder="请输入姓名" v-model="addrezz.rname" type="text">
							</div>
						</div>
						<div class="form-group">
							<label for="details" class="col-sm-2 control-label">收货地址：</label>
							<div class="col-sm-10">

								<div class="addr-linkage" id="selectCity">
									<select  v-model="addrezz.province"  name="province" ></select>
									<select  v-model="addrezz.city" name="city"  ></select>
									<select  v-model="addrezz.area" name="area"  ></select>
								</div>

								<input class="form-control" id="details" placeholder="建议您如实填写详细收货地址，例如街道名称，门牌号码等信息"v-model="addrezz.detail" maxlength="30" type="text">
							</div>
						</div>


						<!-- <div class="form-group">
							<label for="code" class="col-sm-2 control-label">地区编码：</label>
							<div class="col-sm-6">
								<input class="form-control" id="code" placeholder="请输入邮政编码" type="text">
							</div>
						</div> -->
						<div class="form-group">
							<label for="mobile" class="col-sm-2 control-label">手机号码：</label>
							<div class="col-sm-6">
								<input class="form-control" v-model="addrezz.phone" id="mobile" placeholder="请输入手机号码" type="text">
							</div>
						</div>

						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-6">
								<div class="checkbox">
									<label><input type="checkbox" v-model="addrezz.isdefault" value="y"><i></i> 设为默认收货地址</label>
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-6">
								<button type="button" @click="save" class="but">保存</button>
							</div>
						</div>
					
					</form>
					<p class="fz18 cr">已保存的有效地址</p>

					<div class="table-thead addr-thead">
						<div class="tdf1">收货人</div>
						<div class="tdf2">所在地</div>
						<div class="tdf3"><div class="tdt-a_l">详细地址</div></div>
						<!-- <div class="tdf1">邮编</div> -->
						<div class="tdf1">电话/手机</div>
						<div class="tdf1">操作</div>
						<div class="tdf1"></div>
					</div>
					<div class="addr-list">
						<div v-for="(addr,index) in address">
						<div class="addr-item"  v-if="addr.isdefault=='y'">
							<div class="tdf1">{{addr.rname}}</div>
							<div class="tdf2 tdt-a_l">        {{addr.province}} {{addr.city}} {{addr.area}}</div>
							<div class="tdf3 tdt-a_l">{{addr.detail}}</div>
							<!-- <div class="tdf1">350111</div> -->
							<div class="tdf1">{{addr.phone}}</div>
							<div class="tdf1 order">
								<a href="javascript:void(0)" @click="edit(addr.id)">修改</a><a @click="del(addr.id,index,addr.isdefault)" href="javascript:void(0)">删除</a>
							</div>
							<div class="tdf1">
								<a href="javascript:void(0)" class="default active">默认地址</a>
							</div>
						</div>

						<div class="addr-item"  v-if="addr.isdefault=='n'">
							<div class="tdf1">{{addr.rname}}</div>
							<div class="tdf2 tdt-a_l">        {{addr.province}} {{addr.city}} {{addr.area}}</div>
							<div class="tdf3 tdt-a_l">{{addr.detail}}</div>
							<!-- <div class="tdf1">350111</div> -->
							<div class="tdf1">{{addr.phone}}</div>
							<div class="tdf1 order">
								<a href="javascript:void(0)" @click="edit(addr.id)" >修改</a><a @click="del(addr.id,index,addr.isdefault)" href="javascript:void(0)">删除</a>
							</div>
							<div class="tdf1">
								<a href="javascript:void(0)"  @click="setDefault(addr.id,addr.isdefault)" class="default">设为默认</a>
							</div>
						</div>

						</div>



				</div>
</div>
<script>
	$(function(){
		$('#selectCity').distpicker({
			province: '---- 所在省 ----',
			city: '---- 所在市 ----',
			district: '---- 所在区 ----'
		});
	})

</script>
<!--<script>-->
<!--	$(document).ready(function(){-->
<!--		// 添加街道/乡镇-->
<!--		function townFormat(info){-->
<!--			$('.addr-linkage select[name="town"]').hide().empty();-->
<!--			if (info['code'] % 1e4 && info['code'] < 7e6){	//是否为“区”且不是港澳台地区-->
<!--				var ajaxConfig = {-->
<!--					url: 'http://passer-by.com/data_location/town/' + info['code'] + '.json',-->
<!--					scriptCharset:'UTF-8',-->
<!--					dataType: "json",-->
<!--					timeout: 4000,-->
<!--					success: function(data) {-->
<!--						$('.addr-linkage select[name="town"]').show();-->
<!--						// $('#code').val(info['code']) // 填地区编码-->
<!--						for (i in data) {-->
<!--							$('.addr-linkage select[name="town"]').append(-->
<!--									'<option value="' + data[i] + '">' + data[i] + '</option>'-->
<!--							);-->
<!--						};-->
<!--						$('.addr-linkage select[name="town"]').find('option[value="洪山镇"]').prop("selected", "selected");-->
<!--					},-->
<!--				};-->
<!--				$.ajax(ajaxConfig).fail(function(p1,p2,p3){-->
<!--					ajaxConfig.url = 'js/data_location/town/' + info['code'] + '.json';-->
<!--					$.ajax(ajaxConfig)-->
<!--				});-->
<!--			}-->
<!--		};-->
<!--		$('.addr-linkage').citys({-->
<!--			// 如果某天这个仓库地址失效了dataUrl请使用本地 2017.10 的数据 'js/data_location/list.json'-->
<!--			dataUrl: 'http://passer-by.com/data_location/list.json',-->
<!--			spareUrl: 'js/data_location/list.json',-->
<!--			dataType: 'json',-->
<!--			valueType: 'name',-->
<!--			province: '北京',-->
<!--			city:'北京',-->
<!--			area: '鼓楼区',-->
<!--			onChange: function(data) {-->
<!--				townFormat(data)-->
<!--			},-->
<!--		},function(api){-->
<!--			var info = api.getInfo();-->
<!--			townFormat(info);-->
<!--		});-->
<!--	});-->
<!--</script>-->
</body>
</html>